<script setup>
import { ref, nextTick } from 'vue';
import { listApi } from '@/api/sys/log-error';
import { useRequest } from '@/hooks/pages-repeat';
import logErrorMsg from './components/log-error-msg.vue';

defineOptions({
  name: 'sys-log-error'
})

const { 
  requestInit, 
  requestObj, 
  pagination,
  getDataList,
  exportExcal,
}  = useRequest()
requestInit({
  isPage: true,
  listApi,
  exportURL: '/sys/log/error/export',
  query: {
    page: 1,
    limit: 20,
  }
})

const columns = ref([
  {
    width: 300,
    title: '请求URL',
    dataIndex: 'requestUri',
    ellipsis: true
  },
  {
    width: 100,
    title: '请求方式',
    dataIndex: 'requestMethod',
    ellipsis: true
  },
  {
    width: 200,
    title: '请求参数',
    dataIndex: 'requestParams',
    ellipsis: true
  },
  {
    title: '操作IP',
    dataIndex: 'ip',
    ellipsis: true
  },
  {
    width: 200,
    title: '用户代理',
    dataIndex: 'userAgent',
    ellipsis: true
  },
  {
    width: 170,
    title: '创建时间',
    dataIndex: 'createDate'
  },
  {
    width: 120,
    title: '操作',
    dataIndex: 'operate'
  }
])

const logErrorMsgShow = ref(false)
const logErrorMsgRef = ref()
const openLogErrorMsg = (errorInfo) => {
  logErrorMsgShow.value = true
  nextTick(() => {
    logErrorMsgRef.value.init(errorInfo)
  })
}

</script>

<template>
  <div class="container">
    <a-row :gutter="20" wrap>
      <a-col :span="3">
        <a-space>
          <a-button @click="exportExcal">导出</a-button>
        </a-space>
      </a-col>
    </a-row>

    <a-table 
      class="table-common"
      :columns="columns" 
      :data-source="requestObj.dataList" 
      rowKey="id" 
      bordered
      :pagination="requestObj.isPage ? pagination : false"
      :loading="requestObj.dataLoading"
      :scroll="{ y: 580 }"
      @change="getDataList"
      >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex==='operate'">
          <a-button class="btn-primary" type="text" @click="openLogErrorMsg(record.errorInfo)">异常信息</a-button>
        </template>
      </template>

      <template #emptyText>
        <a-empty :description="requestObj.emptyText" />
      </template>
    </a-table>

    <logErrorMsg ref="logErrorMsgRef" v-if="logErrorMsgShow" @closeModal="logErrorMsgShow=false" />
  </div>
</template>

<style lang="scss" scoped>

</style>